<template>
  <el-container>
    <el-header>Header</el-header>
    <!-- <div class="natruralcalculate" :style="{ minHeight: minHeight + 'px' }">
    </div> -->
    <el-main>
      <el-button type="text" @click="addEc">增加机柜</el-button>
      <el-table :data="pageec" border style="width: 100%" size="mini">
        <el-table-column prop="heatloss" label="热损耗" align="center" width="120">
        </el-table-column>
        <el-table-column prop="ecm" label="配电柜型号" width="160" align="center">
        </el-table-column>
        <el-table-column prop="ecz" label="配电柜具体尺寸W*H*D" width="160" align="center">
        </el-table-column>
        <el-table-column prop="ecp" label="柜体摆放位置" width="120" align="center">
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              circle
              @click="updateEc(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              circle
              @click="deleteEc(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row style="margin-top: 20px">
        <!-- <el-col :span="8" style="text-align: left">
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteStudents()"
          >
            批量删除</el-button
          >
        </el-col> -->
        <el-col :span="16" style="text-align: right">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentpage"
            :page-sizes="[5, 10, 50, 100]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
      <!-- 设置配电柜数据修改对话框 -->
      <el-dialog
        title="配电柜信息修改"
        :visible.sync="formDialogVisible"
        width="75%"
        class="ec-dialog"
        @close="closeDialogForm('Ecform')"
        :close-on-click-modal="false"
      >
        <el-form :model="Ecform" ref="Ecform" :inline="true">
          <el-form-item label="配电柜型号" prop="ecm">
            <el-select  v-model="Ecform.ecm"  placeholder="请选择配电柜型号"  @change="getEcmInfo">
              <el-option  v-for="(item, index) in ecm_options"  :key="index"  :label="item"  :value="item"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="配电柜尺寸" prop="ecz">
            <el-select  v-model="Ecform.ecz"  placeholder="请选择配电柜尺寸"  @change="getEczInfo">
              <el-option  v-for="(item, index) in ecz_options"  :key="index"  :label="item"  :value="item"></el-option>
            </el-select>
          </el-form-item>

          <br />
          <el-form label-position="left" :inline="true">
            <el-form-item label="宽度" prop="ecw">
              <el-input class="bbb" v-model="Ecform.ecw" :disabled="true"
              ></el-input
              >mm
            </el-form-item>
            <el-form-item label="高度" prop="ech" style="margin-left: 40px">
              <el-input class="bbb" v-model="Ecform.ech" :disabled="true"></el-input>mm
            </el-form-item>
            <el-form-item label="深度" prop="ecd" style="margin-left: 40px">
              <el-input class="bbb" v-model="Ecform.ecd" :disabled="true"></el-input>mm
            </el-form-item>
            <el-form-item label="换热系数" prop="eck" style="margin-left: 40px">
              <el-input class="bbb" v-model="Ecform.eck" :disabled="true"></el-input>
            </el-form-item>
          </el-form>
        </el-form>
        <div class="radio_container">
          <el-radio-group v-model="Ecform.ecp">
            <el-radio label="1"><img src="../../assets/logo.png" alt="" />
              <br />单一配电柜，各个面自由放立
            </el-radio>
            <el-radio label="2" style="margin-left: 130px">
              <img src="../../assets/logo.png" alt="" />
              <br />单一配电柜，靠墙摆放</el-radio>
            <el-radio label="3" style="margin-top: 15px; margin-left: 125px">
              <img src="../../assets/logo.png" alt="" />
              <br />一套配电柜中的第一个或者最后一个，各个面自由放立</el-radio>
            <el-radio label="4" style="margin-top: 15px"><img src="../../assets/logo.png" alt="" />
              <br />一套配电柜中的第一个或者最后一个，靠墙摆放</el-radio>
            <el-radio label="5" style="margin-top: 15px; margin-left: 18px">
              <img src="../../assets/logo.png" alt="" />
              <br />一套配电柜中的任意一个，各个面自由放立
            </el-radio>
            <el-radio label="6" style="margin-top: 15px">
              <img src="../../assets/logo.png" alt="" />
              <br />一套配电柜中的任意一个，靠墙摆放</el-radio>
            <el-radio label="7" style="margin-top: 15px">
              <img src="../../assets/logo.png" alt="" />
              <br />一套配电柜中的任意一个，靠墙摆放，并且顶部覆盖</el-radio>
          </el-radio-group>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitEcform('Ecform')">确 定</el-button>
          <el-button type="info" @click="closeDialogForm('Ecform')">取 消</el-button>
        </div>
      </el-dialog>
    </el-main>
    <Footer></Footer>
  </el-container>
</template>

<script>
import Footer from "../Footer.vue";
export default {
  name: "NaturalCalculate",
  components: {
    Footer, // 注册组件
  },
  data() {
    return {
      ec: [], //所有的配电柜信息
      pageec: [], //当前页的配电柜信息
      //====分页相关的变量====
      total: 0, //数据的总行数
      currentpage: 1, //当前的所在的页
      pagesize: 10, //每页显示多少行数据
      formDialogVisible: false, //控制配电柜信息修改对话框是否出现
      //弹出框表单对应数据
      Ecform: {
        id: " ", //记录配电柜数据的唯一标识
        ecm: " ", //选择的配电柜型号
        ecz: " ", //选择的配电柜尺寸
        ecw: " ", //选择的配电柜宽度
        ech: " ", //选择的配电柜高度
        ecd: " ", //选择的配电柜深度
        eck: " ", //选择的配电柜的换热系数
        ecp: " ", //选择的配电柜摆放位置
        heatloss: " ", //选择的配电柜热损耗
      },
      ecm_options: [], //配电柜型号下拉菜单
      ecmobj: {}, //存放配电柜的型号和尺寸的字典
      ecz_options: [], //配电柜尺寸选择菜单
      isEdit: false, //标识是否是修改配电柜信息
    };
  },
  methods: {
    //初始化配电柜型号下拉菜单
    getEcmInfo() {
      //清空配电柜尺寸选择
      this.Ecform.ecz = "";
      let that = this;
      that.$http
        .get("/ecm/")
        .then((res) => {
          if (res.data.code === 1) {
            that.ecmobj = res.data.dict1; //接受带有尺寸和型号的字典数据
            that.ecm_options = res.data.data2; //接受型号数据
          } else {
            that.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          //请求失败后执行的函数
          console.log(err);
        });
      // 遍历配电柜型号下拉选项数组
      for (const k in this.ecm_options) {
        // 配电柜型号内容 是否等于 配电柜型号的下拉选择数组中的某一项
        if (this.Ecform.ecm === this.ecm_options[k]) {
          this.ecz_options = this.ecmobj[this.Ecform.ecm];
          console.log(this.ecz_options)
        }
      }
    },
    closeDialogForm(Ecform) {
      //清空
      this.Ecform.ecm = " "; //清空配电柜的型号选择
      this.Ecform.ecz = " "; //清空配电柜的尺寸选择
      this.Ecform.ecw = " "; //清空配电柜的宽度数据
      this.Ecform.ech = " "; //清空配电柜的高度数据
      this.Ecform.ecd = " "; //清空配电柜的深度数据
      this.Ecform.eck = " "; //清空配电柜的换热系数数据
      this.ecz_options = []; //清空配电柜的尺寸选择菜单
      this.Ecform.ecp = " "; //清空配电柜的位置选择
      //关闭
      this.formDialogVisible = false;
      //初始化isEdit值
      this.isEdit = false;
    },
    //获取配电柜尺寸内各种信息
    getEczInfo() {
      let that = this;
      //传递给后端选择的配电柜尺寸
      that.$http
        .post("/ecz/", {
          eczdata: that.Ecform.ecz,
          ecmdata: that.Ecform.ecm,
        })
        .then((res) => {
          if (res.data.code === 1) {
            that.Ecform.ecw = res.data.ecw; //获取配电柜宽度
            that.Ecform.ech = res.data.ech; //获取配电柜高度
            that.Ecform.ecd = res.data.ecd; //获取配电柜深度
            that.Ecform.eck = res.data.eck; //获取配电柜换热系数
          } else {
            that.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          //请求失败后执行的函数
          console.log(err);
          that.$message.error("获取后端结果出现异常！");
        });
    },
    //获取所有配电柜信息
    getEc() {
      //记录this的地址
      let that = this;
      //使用Axios实现Ajax请求
      that.$http
        .get("/ec/")
        .then((res) => {
          //请求成功后执行的函数
          if (res.data.code === 1) {
            //把数据给ec
            that.ec = res.data.data;
            //获取返回记录的总行数
            that.total = res.data.data.length;
            //获取当前页的数据
            that.getPageEc();
            //提示：
            that.$message({
              message: "数据加载成功！",
              type: "success",
            });
          } else {
            //失败的提示！
            that.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          //请求失败后执行的函数
          console.log(err);
        });
    },
    //获取当前页的配电柜信息
    getPageEc() {
      //清空pageec中的数据
      this.pageec = [];
      //获得当前页的数据
      for (
        let i = (this.currentpage - 1) * this.pagesize;
        i < this.total;
        i++
      ) {
        //遍历数据添加到pageec中
        this.pageec.push(this.ec[i]);
        //判断是否达到一页的要求
        if (this.pageec.length === this.pagesize) break;
      }
    },
    handleSizeChange(size) {
      //修改当前每页数据行数
      this.pagesize = size;
      //数据重新分页
      this.getPageEc();
    },
    //调整当前的页码
    handleCurrentChange(pageNumber) {
      //修改当前的页码
      this.currentpage = pageNumber;
      //数据重新分页
      this.getPageEc();
    },
    //提交配电柜信息的表单（添加、修改）
    submitEcform(formName) {
      //执行添加或者修改？
      if (this.isEdit) {
        //修改
        this.submitUpdateEc();
      } else {
        //添加
        this.submitAddEc();
      }
    },
    //添加到数据库的函数
    submitAddEc() {
      //定义that
      let that = this;
      //执行Axios请求
      that.$http
        .post("/ec/add/", that.Ecform)
        .then((res) => {
          //执行成功
          if (res.data.code === 1) {
            //获取项目选择的配电柜信息
            that.ec = res.data.data;
            //获取记录条数
            that.total = res.data.data.length;
            //获取分页信息
            that.getPageEc();
            //提示：
            that.$message({
              message: "数据添加成功！",
              type: "success",
            });
            //关闭窗体
            this.closeDialogForm("ECform");
          } else {
            //失败的提示！
            that.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          //执行失败
          console.log(err);
          that.$message.error("获取后端查询结果出现异常！");
        });
    },
    //修改更新到数据库
    submitUpdateEc() {
      //定义that
      let that = this;
      //执行Axios请求
      that.$http
        .post("/ec/update/", that.Ecform)
        .then((res) => {
          //执行成功
          if (res.data.code === 1) {
            //获取项目选择的配电柜的信息
            that.ec = res.data.data;
            //获取记录条数
            that.total = res.data.data.length;
            //获取分页信息
            that.getPageEc();
            //提示：
            that.$message({
              message: "配电柜数据修改成功！",
              type: "success",
            });
            //关闭窗体
            this.closeDialogForm("ECform");
          } else {
            //失败的提示！
            that.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          //执行失败
          console.log(err);
          that.$message.error("修改时获取后端查询结果出现异常！");
        });
    },
    //添加配电柜时打开表单
    addEc() {
      //弹出表单
      this.formDialogVisible = true;
    },
    //修改选择好了的配电柜箱体的数据
    updateEc(row) {
      //弹出表单
      this.formDialogVisible = true;
      //修改isEdit的值
      this.isEdit = true;
      //深拷贝方法：
      this.Ecform = JSON.parse(JSON.stringify(row));
    },
    //删除一条所选配电柜数据
    deleteEc(row) {
      //等待确认
      this.$confirm("是否确认删除所选配电柜信息？", "提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //确认删除响应事件
          let that = this;
          //调用后端接口
          that.$http
            .post("ec/delete/", { id: row.id })
            .then((res) => {
              if (res.data.code === 1) {
                //获取项目选择的配电柜信息
                that.ec = res.data.data;
                //获取记录数
                that.total = res.data.data.length;
                //分页
                that.getPageEc();
                //提示
                that.$message({
                  message: "删除成功！",
                  type: "success",
                });
              } else {
                that.$message.error(res.data.msg);
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    this.getEcmInfo(); //加载配电柜型号选择菜单
    this.getEc(); //加载该项目所选择的的配电柜信息
  },
};
</script>

<style lang="less" scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
}

.el-main {
  background-color: #e9edf3;
  color: #333;
  // text-align: center;
  // line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

//选择框图片大小设置
.radio_container {
  margin-left: 10px;
  img {
    height: 15px;
    width: 20px;
  }
}

//设置对话框中input的样式
.bbb {
  width: 120px;
}
</style>

<style lang="less">
.ec-dialog {
  .el-dialog__header {
    background: hsl(199, 58%, 75%);
  }

  /* 弹出层设置背景色 底部*/

  .el-dialog__footer {
    background-color: hsl(199, 58%, 75%) !important;
  }
  /* 弹出层设置背景色 身体部份*/
  .el-dialog__body {
    background: linear-gradient(to bottom, hsl(199, 58%, 75%));
    background-size: 100%, 100%;
  }
}
</style>
